<template>
	<default-header-page-layout ref="page" title="分拣">
		<view class="page-frame with-action-user-row" :style="{height:pageBodyHeight+'px'}" v-if="pageBodyHeight">
			<action-user-row />
			<view class="with-action-user-row-page-content">
				<scan-input-form-item :msgType='msgType' class="forma-item" label="托盘号" v-model="form.containerCode "
					:msg="msg" @search="onSearchContainter" @clear="onClearContainter" />
				<scan-input-form-item v-show="Boolean(form.orderNo)" placeholder="" disabled :hasScan="false" :hasSearch="false" class="forma-item" label="单据号"
					:value="form.orderNo" @search="onSearchNO" @clear="onClearNO" />
			
				<view v-if="true">
					<view v-for="(item,index) in wmsSortOrderList" :key="index">
						<bar-content :index="index" :content="item"></bar-content>
					</view>
				
				</view>
			</view>


		</view>
		<template v-slot:footer>
			<view class="bottom-btns-row">
				<view class="btn-frame">
					<!--  -->
					<u-button :disabled="!bindIn" @click="onSubmit" type="primary" text="提 交">
					</u-button>
				</view>
			</view>
		</template>
	</default-header-page-layout>
</template>
<script>
	import DefaultHeaderPageLayout from '@/components/DefaultHeaderPageLayout.vue'
	import ScanInputFormItem from '@/components/ScanInputFormItem.vue'
	import ActionUserRow from '@/components/ActionUserRow.vue'
	import barContent from './modules/barContent.vue'
	import {
		$alert,
		$successInfo
	} from '@/static/js/utils'
	import {
		SortSure,
		GetSortInfo
	} from '@/api/slicingOn.js'
	import {
		getSysEnumData
	} from '@/api/common.js'
	const defaultForm = {
		code: '',
		material: ''
	}
	let initInterVal = null;

	export default {
		name: 'slicingOnPage',
		components: {
			DefaultHeaderPageLayout,
			ScanInputFormItem,
			ActionUserRow,
			barContent
		},
		data() {
			return {
				pageBodyHeight: 0,
				form: {
					containerCode: '',
					orderNo: ''
				},
				msg: '',
				msgType: 'info',
				ContainerStatus: [],
				wmsSortOrderList:[],
				wmsContainer:{}
			}
		},
		computed:{
			bindIn(){
				return Boolean(this.wmsContainer.containerCode)
			}
		},
		methods: {
			// 获取托盘信息
			onSearchContainter(containerCode) {
				if (containerCode) {
					this.form.containerCode = containerCode
				}
				const param = {
					containerCode: this.form.containerCode
				}
				GetSortInfo(param).then(res => {
					const {
						data
					} = res
					console.log(res, 'res');
					if (Boolean(data) && Boolean(data.wmsContainer) && data.wmsSortOrderList.length > 0) {
						const {
							wmsSortOrderList,
							wmsContainer
						} = data
						this.wmsSortOrderList=wmsSortOrderList
						this.wmsContainer=wmsContainer
						this.form.orderNo = wmsSortOrderList[0].orderNo
						// 	this.contaninerData = res.data
						// 		const containterDetail = this.contaninerData.wmsContainer || {}
						// 		this.wmsMaterials=this.contaninerData.wmsMaterials||[]
						// 		this.noData.forEach(item=>{
						// 		const result=this.wmsMaterials.filter(obj => obj.materialName == item.materialname)
						// 		if(result.length>0) {
						// 			this.$set(item, 'checked', true)
						// 			this.$set(item,'qty',result[0].bindQuantity)
						// 		}else {
						// 			this.$set(item, 'checked', false)		
						// 		}

						// 		})
						const result = this.ContainerStatus.filter(item => item.code == wmsContainer
							.containerStatus)
						var containerStatusName = ''
						if (result.length > 0) {
							containerStatusName = result[0].value
						}
						this.msgType = 'info'
						this.msg =
							`尺寸：${wmsContainer.specLength+'*'+wmsContainer.specWidth+'*'+wmsContainer.specHeight}，状态：${containerStatusName}`
					} else {
						this.msg = res.message
						this.msgType = 'error'
					}
				})
			},
			// 清除托盘信息
			onClearContainter() {
				this.form={
					containerCode: '',
					orderNo: ''
				}
				this.msg = ''
				this.msgType = 'info'
				this.wmsSortOrderList=[]
				this.wmsContainer={}
			},
			// 获取枚举信息
			async getSysEnumData() {
				try {
					let {
						data
					} = await getSysEnumData({
						enumName: 'ContainerStatus'
					})
					this.ContainerStatus = data
				} catch (e) {
					//TODO handle the exception
					console.log(e);
				}
			},
			
			// 确认提交
			async onSubmit() {
				uni.showModal({
					title: '分拣确认',
					content: '确定执行分拣操作吗？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确定',
					success: async (type) => {
						let {
							confirm,
							cancel
						} = type
						if (confirm) {
							const {wmsContainer,wmsSortOrderList}=this
							let data={wmsContainer,wmsSortOrderList}
							try{
								await SortSure(data)
								uni.showToast({
									title: '分拣成功',
									success: () => {
										this.onClearContainter()
									}
								})
							}catch(e){
								//TODO handle the exception
							}
						
						}
					}
				})
				
				
			},
			
			/* 页面初始化获取页面body高度的定时器 */
			startInitInterval(callback) {
				initInterVal = setInterval(() => {
					if (this.pageBodyHeight) {
						this.clearInitInterval()
						callback && callback()
					} else {
						this.pageBodyHeight = this.$refs.page.getBodyHeight()
					}
				}, 200)
			},
			/* 清除定时器 */
			clearInitInterval() {
				try {
					clearInterval(initInterVal)
					initInterVal = null
				} catch (e) {
					//TODO handle the exception
				}
			},
	
		},
		onReady() {
			this.startInitInterval(() => {
				/* 页面初始化后需要执行的代码在这边调用 */
				this.getSysEnumData()
			})
		},
		onUnload() {
			this.clearInitInterval()
		}
	}
</script>
<style lang="scss" scoped>
	.bottom-btns-row {
		padding: 10rpx;
		background-color: $uni-bg-color;
	}

	.forma-item {
		margin-bottom: 24rpx;
	}

	.slicing-on-page-content {
		height: 100%;
		display: flex;
		flex-direction: column;

		&>.top-view {
			flex-shrink: 0;
		}

		&>.list-view {
			height: 1px;
			overflow: auto;
			flex-grow: 1;

			.list-items-group {
				padding-top: 24rpx;
			}
		}
	}
</style>